interface MyButtonProps {
	title: string;
	disabled: boolean;
}

/**
 * 在React的TypeScript代码中，React.FC<MyButtonProps>是一个类型别名，用于表述一个函数组件（Functional Component）的类型。
 * 这里的`FC`是`FunctionComponent`的缩写。
 * 具体来说：
 * - `React.FC`是一个泛型（generic），它接受一个类型参数，该参数用于指定组件props的类型。
 * - `<MyButtonProps>`是传递给`FC`的类型参数，它告诉TypeScript这个函数组件的props应该符合`MyButtonProps`接口定义的类型。
 * 所以，React.FC<MyButtonProps>告诉TypeScript：
 * 1. 这是一个React函数组件。
 * 2. 这个组件的props应该是一个对象，它的结构符合`MyButtonProps`接口定义的类型。
 */

export const Mybutton: React.FC<MyButtonProps> = (props) => {
	const { title, disabled } = props;
	return <button disabled={disabled}>{title}</button>;
};

type BaseProps = {
	className?: string;
	styleForButton?: React.CSSProperties;
};

/**
 * type可以基于现有的类型通过`&` 交叉类型创建新的类型
 */
type MyButtonPropsForCombine = BaseProps & {
	title: string;
	disable: boolean;
};

export const MyButtonForCombine: React.FC<MyButtonPropsForCombine> = ({
	title,
	disable,
  styleForButton,
	...restProps
}) => {
	return (
		<button style={styleForButton} {...restProps} disabled={disable}>
			{title}
		</button>
	);
};
